Novità per il web

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Rachel Andrew

Pubblicata: 20 maggio 2025

In occasione di Google I/O 2025, la keynote Novità sul web ha condiviso tutti gli annunci relativi a Baseline, oltre a un'anteprima di alcune delle funzionalità che sono diventate parte di Baseline quest'anno. È stato un anno fantastico per il web e per Baseline. Questo post è un riepilogo di tutto ciò che è stato menzionato, con tutti i link per scoprire di più.

Dashboard della piattaforma web e funzionalità web

Nel 2024 abbiamo annunciato il lancio iniziale della dashboard della piattaforma web, che utilizza il set di dati delle funzionalità web, consente di esplorare tutte le funzionalità che fanno parte di Baseline.

I dati sulle funzionalità web sono ora completati, con tutte le funzionalità della piattaforma mappate. Man mano che nuove funzionalità vengono aggiunte a Base di riferimento ogni mese, i dati vengono aggiornati e tutto questo viene visualizzato nella dashboard.

Strumenti per aiutarti a scoprire il tuo target di riferimento

Sebbene tu possa basare le tue norme di assistenza del browser sul target in movimento di Baseline ampiamente disponibile, come accade per la agenzia britannica Clearleft, puoi anche adottare un target fisso basato su un anno di riferimento. Ora puoi utilizzare i tuoi dati utente, insieme ai dati delle funzionalità web, per definire il target migliore per te.

L'anno scorso, in occasione della conferenza I/O, abbiamo annunciato che RUMvision avrebbe implementato Baseline nel suo prodotto. Questa integrazione è ora disponibile.

Poiché utilizza i dati RUM, ti aiuta a identificare l'anno di riferimento da adottare in base a questi dati anziché a una media globale. Inoltre, può aiutarti a capire se la metrica Base di riferimento: ampiamente disponibile è adatta alle tue esigenze.

Puoi anche utilizzare i dati di Google Analytics per vedere chiaramente la percentuale di utenti che supportano ogni target di riferimento con il nuovo strumento di controllo del riferimento di Google Analytics.

Questi sono solo due di una raccolta in crescita di strumenti che ti aiutano a mappare i tuoi dati utente reali a Baseline.

Di recente, il gruppo della community Web DX ha lanciato un'estensione per Netlify che mostra il supporto per diversi anni di riferimento e la disponibilità su larga scala sui tuoi siti per aiutarti a decidere quale scegliere come target nei tuoi strumenti di compilazione. A breve saranno disponibili le integrazioni con il prodotto RUM Observatory di Cloudflare e Contentsquare.

Integrare i dati con i tuoi strumenti

I dati delle funzionalità web sono aperti e disponibili per le tue integrazioni. Stiamo cercando di semplificare questa operazione.

Utilizza l'API Dashboard della piattaforma web o utilizza i dati delle funzionalità web direttamente dal pacchetto npm.

Ora puoi mappare le versioni del browser a un target di base utilizzando il modulo baseline-browser-mapping del gruppo della community WebDX del W3C. Questo modulo può essere utilizzato in un ambiente JavaScript lato server o scaricando file JSON o CSV aggiornati quotidianamente dal repository.

Questi dati includono le mappature non solo per l'insieme di browser di base, ma anche per i browser a valle come Samsung Internet, Opera, UC Browser e Android Webview.

Scopri se le funzionalità sono supportate dal tuo target di riferimento

Le informazioni di riferimento ora sono disponibili nella maggior parte delle pagine MDN e Can I Use, ma anche nella dashboard della piattaforma web e negli articoli su web.dev e CSS Tricks. Tuttavia, tutto ciò richiede di contattare l'assistenza. Sarebbe molto più utile visualizzare le informazioni di riferimento nell'IDE durante la scrittura del codice e nell'ambito di tutti gli altri strumenti che utilizzi.

Siamo lieti di comunicarti che molti strumenti chiave ora hanno il supporto di Baseline integrato o possono essere facilmente integrati.

browserslist-config-baseline

Molti strumenti come Babel e PostCSS utilizzano browserslist per determinare i browser da supportare.

Insieme al gruppo di lavoro WebDX e ai membri della community, il team di Chrome ha contribuito a rilasciare un nuovo strumento chiamato browserslist-config-baseline. In questo modo puoi configurare i target della lista di browser in termini di riferimento, ad esempio Anni di riferimento o Disponibile su larga scala.

In questo modo, qualsiasi strumento che utilizza un target browserslist può ora essere espresso in termini di Baseline.

Scopri di più in Utilizzare Baseline con browserslist.

Baseline nei linters: ESLint e Stylelint

Di recente è stato reso possibile l'utilizzo di Baseline con i linters grazie ad alcuni nuovi strumenti nello spazio dei linters, a partire da ESLint per CSS.

Baseline ESLint ha una regola use-baseline. Puoi impostare il valore preferito per il valore di destinazione di riferimento e riceverai un avviso quando utilizzi funzionalità più recenti rispetto al valore di destinazione. Puoi scegliere come risolvere questi avvisi: sostituendo la funzionalità con elementi primitivi o eliminando l'avviso del linter, che è una soluzione perfettamente valida quando sai di utilizzare una funzionalità all'avanguardia in sicurezza, ad esempio se si tratta di un miglioramento progressivo.

Per impostazione predefinita, ESLint non emette un avviso se vengono utilizzate funzionalità più recenti all'interno dei blocchi @supports, poiché i browser non supportati non le valuteranno comunque.

Per le tue esigenze di linting HTML, è disponibile anche un plug-in della community chiamato html-eslint.

Stylelint supporta ufficialmente un plug-in chiamato stylelint-plugin-use-baseline. Questa regola si comporta esattamente come la regola ESLint per CSS, ma viene eseguita su Stylelint.

Molti linter hanno anche plug-in IDE, quindi puoi ricevere un feedback immediato sullo stato della linea di base durante la programmazione tramite sottolineature ondulate.

Base di riferimento in VS Code e JetBrains WebStorm

Da tempo molti IDE supportano la possibilità di passare il mouse sopra una funzionalità nell'editor e visualizzare l'elenco delle versioni del browser supportate.

Tuttavia, può essere piuttosto difficile capire se la funzionalità è effettivamente sicura da usare. Devi analizzare mentalmente se mancano browser importanti da quell'elenco e quanto è recente la versione del browser.

Per risolvere il problema, abbiamo collaborato con VS Code, l'IDE più utilizzato da milioni di sviluppatori web, per integrare i dati di BaseLine direttamente in queste schede popup.

Ora puoi passare il mouse sopra una funzionalità per sapere se è considerata di riferimento e per quanto tempo oppure se esistono browser principali che non la implementano ancora completamente.

Le funzionalità supportate includono proprietà CSS, elementi HTML e attributi HTML. Scopri di più nell'articolo Visual Studio Code ora supporta Baseline.

Grazie a questa integrazione, anche gli IDE basati su VS Code potranno usufruire di queste schede popup.

Inoltre, siamo in grado di annunciare che JetBrains sta implementando le schede popup nel suo IDE WebStorm per JavaScript e TypeScript.

Il web sta migliorando più velocemente che mai

Ci auguriamo che Baseline ti aiuti a sfruttare il fatto che il web interoperabile sta migliorando più velocemente che mai.

Puoi utilizzare la dashboard della piattaforma web per visualizzare tutte le funzionalità che sono diventate di recente disponibili come riferimento negli ultimi dodici mesi, ovvero dal Google I/O 2024.

Inoltre, puoi stare certo che molte funzionalità saranno disponibili molto presto come Baseline poiché sono incluse nel progetto Interop 2025. Puoi approfondire tutte le funzionalità incluse in Interop2025: un altro anno di miglioramenti alla piattaforma web.

Modalità di scrittura orizzontale

Abbiamo già visto una funzionalità diventare di riferimento come Nuova funzionalità disponibile, ovvero i valori sideways-rl e sideways-lr per la proprietà CSS writing-mode. Se utilizzi una modalità di scrittura verticale solo per motivi di layout, è probabile che i valori laterali siano quelli da raggiungere.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Posizionamento dell'ancoraggio

Posizionamento dell'ancoraggio implementato in Chrome 125. Ti consente di associare la posizione di un elemento a un'ancora, ad esempio quando apri una descrizione comando con un pulsante.

Ora è incluso in Interop 2025, quindi dovrebbe essere incluso in Baseline quest'anno.

Core Web Vitals: LCP e INP

API LCP

API Event Timing (per INP)

Web Vitals può aiutarti a quantificare l'esperienza di utilizzo del tuo sito e a individuare opportunità di miglioramento. L'iniziativa Web Vitals mira a semplificare il panorama e aiutare i siti a concentrarsi sulle metriche più importanti, ovvero i Segnali web essenziali.

Interop 2025 include le metriche Largest Contentful Paint (LCP) e Interaction to Next Paint (INP) implementando l'APILargestContentfulPaint e l'API Event Timing su tutti i browser.

Miglioramenti all'elemento <details>

L'elemento <details> stesso è già disponibile a livello generale come riferimento. È stato incluso in Interop 2025 perché esistono una serie di funzionalità che rendono più utili i widget di informativa con <details>.

L'elemento <details> contiene un elemento <summary> che è la parte visibile sulla pagina quando l'elemento <details> è compresso. Al di fuori del <summary> sono i contenuti dell'elemento <details>, che sono nascosti finché l'utente non fa clic sul riepilogo.

Una delle funzionalità che verrà resa interoperabile durante Interop 2025 è nascondere i contenuti utilizzando content-visibility anziché display, il che significa che, se non vengono espansi, i contenuti non verranno visualizzati affatto.

Fa parte del lavoro di Interop 2025 anche lo pseudo-elemento ::marker. L'elemento pseudo::marker consente di applicare uno stile al triangolo di divulgazione dell'elemento <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Poi, un altro pseudo-elemento: ::details-content.

::details-content rappresenta i contenuti, ovvero la parte dell'elemento details che si espande e si comprime e ti consente di applicare uno stile.

[open]::details-content {
  border: 5px dashed hotpink;
}

Sono stati apportati anche alcuni interessanti miglioramenti, come l'espansione automatica dell'elemento <details> con le corrispondenze di ricerca nella pagina e l'impostazione del valore until-found dell'attributo hidden HTML su Base di riferimento: appena disponibile. In questo modo, un elemento viene nascosto finché non viene trovato utilizzando la ricerca nella pagina del browser o non si accede direttamente seguendo un frammento di URL.

CSS @scope

La regola CSS @scope ti consente di limitare la copertura dei selettori. Se imposti un inizio ambito con @scope, tutte le regole di stile nidificate all'interno della regola at si applicano solo a quella struttura DOM.

Ad esempio, se vuoi scegliere come target solo gli elementi <img> all'interno di un elemento con una classe .card, .card diventerà l'elemento radice dell'ambito.

@scope (.card) {
    img {
        border-color: green;
    }
}

Scopri di più nella sezione Limitare la copertura dei selettori con la regola at @scope CSS.

scrollend

Un'altra funzionalità che riduce la complessità e migliora le interfacce di scorrimento è scrollend. Senza l'evento scrollend, non esiste un modo affidabile per rilevare che una scorrimento è completata.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Con l'evento scrollend, il browser esegue tutta questa difficile valutazione per te.

document.onscrollend = event => {…}

Scopri altri esempi in Scrollend, un nuovo evento JavaScript.

Transizioni tra visualizzazioni dello stesso documento

Infine, ma non per importanza, le transizioni di visualizzazione fanno parte di Interop 2025. Il lavoro riguarda le transizioni di visualizzazione nello stesso documento, quindi quelle per le app a pagina singola e anche le classi di transizioni di visualizzazione.

Segui la dashboard di Interop 2025 per vedere come si sta sviluppando il progetto nel corso dell'anno.

Le funzionalità incluse in Interop 2025 non saranno le uniche a far parte di Baseline quest'anno, ma la loro inclusione nei progetti è un buon segno che sono una priorità e saranno disponibili a breve.

L'esperimento è stato appena avviato

È stato un anno entusiasmante per Baseline e abbiamo fatto molta strada rispetto agli annunci dello scorso anno. Ora il backfill dei dati delle funzionalità web è stato completato. Ciò ha aperto le porte e ha permesso di creare strumenti per gli sviluppatori. Siamo solo all'inizio e se hai un prodotto o uno strumento open source che potrebbe trarre vantaggio dall'inclusione di questi dati, ti invitiamo a contattarci.

Continua a visitare web.dev, perché continueremo a pubblicare annunci su nuovi strumenti e tutorial per aiutarti a sfruttare tutto ciò che il web ha da offrire.